import * as React from 'react';
import { TimePickerProps } from './interface';
import './style/index.less';
import classNames from 'classnames';
import dayjs, { Dayjs } from 'dayjs';
import PickerPanel from './PickerPanel';

const TimePicker = React.forwardRef<HTMLDivElement, TimePickerProps>((props, ref) => {
  const {
    id,
    placeholder = '请选择时间',
    className,
    inputReadOnly,
    autoFocus,
    disabled,
    suffixIcon,
    prefixCls = 'dt-timepicker',
    allowClear,
    clearIcon,
    style,
    format = 'hh:mm:ss',
    open: customOpen,
  } = props;
  const [focused, setFocused] = React.useState<boolean>(false);
  const [open, setOpen] = React.useState<boolean>(customOpen || false);
  const [innerText, setInnerText] = React.useState<Dayjs | null>(null);
  const [baseText, setBaseText] = React.useState<string>('');
  const [position, setPostion] = React.useState<React.CSSProperties>({});
  console.log(innerText);

  const suffixRender = <span className={classNames(`${prefixCls}-suffix-anticon`)}>logo</span>;
  const suffixNode = (
    <span className={`${prefixCls}-suffix`}>{suffixIcon ? suffixIcon : suffixRender}</span>
  );

  let clearNode: React.ReactNode;
  if (allowClear && baseText && !disabled) {
    clearNode = (
      <span
        onMouseDown={(e) => {
          e.preventDefault();
          e.stopPropagation();
        }}
        onMouseUp={(e) => {
          e.preventDefault();
          e.stopPropagation();
          setInnerText(null);
          setBaseText('');
        }}
        className={`${prefixCls}-clear`}
        role="button"
      >
        {clearIcon || <span className={`${prefixCls}-clear-btn`} />}
      </span>
    );
  }

  const mergedInputFocus = (e: React.FocusEvent<HTMLInputElement>) => {
    setFocused(true);
    setOpen(true);

    const renderBoundingClient = e.currentTarget.getBoundingClientRect();
    const { scrollTop } = window.document.documentElement;
    setPostion({
      top: renderBoundingClient.top + renderBoundingClient.height * 1.3 + scrollTop,
      left: renderBoundingClient.left - 11,
    });
  };

  const mergedInputBlur = () => {
    setFocused(false);
    if (dayjs(baseText).toString() === 'Invalid Date') {
      setBaseText('');
      return;
    }
    setBaseText(dayjs(baseText).format(format));
    setInnerText(dayjs(baseText));
  };

  const mergedInputProps = {
    id,
    placeholder,
    autoFocus,
    disabled,
    readOnly: inputReadOnly,
    title: baseText,
    value: baseText,
    onFocus: mergedInputFocus,
    onBlur: mergedInputBlur,
    onSubmit: () => {
      setInnerText(null);
      mergedInputBlur();
      return true;
    },
    onCancel: () => {
      setInnerText(null);
      mergedInputBlur();
    },
    onChange: (e: React.ChangeEvent<HTMLInputElement>) => {
      setBaseText(e.target.value);
    },
  };

  const pickerProps = {
    isOpen: open,
    style: position,
  };

  const eventClassString = classNames(className, prefixCls, {
    [`${prefixCls}-disabled`]: disabled,
    [`${prefixCls}-focused`]: focused,
  });

  const placeholderClassString = classNames(`${prefixCls}-input`);

  return (
    <label className={eventClassString} style={style}>
      <div ref={ref} className={placeholderClassString}>
        <input {...mergedInputProps} />
        {suffixNode}
        {clearNode}
      </div>
      <PickerPanel {...pickerProps} />
    </label>
  );
});

export default TimePicker;
